<template>
  <el-form ref="userJobIdenForm" :model="userJobIdens" :rules="userJobIdenRules" label-width="120px" class="demo-ruleForm"
    size="default" status-icon>
    <p style="font-size: 24px;margin-bottom: 30px;padding-top: 10px;padding-left: 20px;">求职意向</p>
    <el-form-item label="期望职位" prop="title" style="margin-top: 10px;">
      <el-input v-model="userJobIdens.title" style="width: 300px;" />
    </el-form-item>
    <el-form-item label="期望行业" prop="industry" style="margin-top: 10px;">
      <el-cascader :options="proxy.$store.state.authState.job_industry" v-model="userJobIdens.industry" clearable
        :show-all-levels="false" style="width: 300px;" />
    </el-form-item>
    <el-form-item label="期望城市" prop="city" style="margin-top: 10px;">
      <el-cascader style="width: 300px;" :options="options" v-model="userJobIdens.city" separator="-" placeholder="请选择">
      </el-cascader>
    </el-form-item>
    <el-form-item label="期望薪资" style="margin-top: 10px;">
      <el-select v-model="userJobIdens.salaryMin" clearable style="margin-right: 15px; width: 125px;"
        placeholder="Select">
        <el-option v-for="item in salaryMins" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
      <span style="font-size: 25px;width: 20px;display: flex;align-items: center;justify-content: center;align-content: center;">-</span>
      <el-select v-model="userJobIdens.salaryMax" clearable style="margin-left: 15px; width: 125px;" placeholder="Select">
        <el-option v-for="item in salaryMaxs" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
    </el-form-item>
    <el-form-item label="工作性质" prop="jobNature">
      <el-radio-group v-model="userJobIdens.jobNature">
        <el-radio label="全职" border />
        <el-radio label="兼职" border />
        <el-radio label="实习" border />
      </el-radio-group>
    </el-form-item>
    <el-form-item>
      <el-button type="success" @click="saveInfo(userJobIdenForm)">保存</el-button>
      <el-button @click="cancelEdit(userJobIdenForm)">取消</el-button>
    </el-form-item>
  </el-form>
</template>
<script lang='ts' setup>
import { getJobIndustry } from "@/api/authApi"
import { ref, onMounted, getCurrentInstance, reactive } from 'vue'
import { useStore } from "vuex"
import type { FormInstance } from 'element-plus'
import { userJobIdens, userJobIdenRules } from "@/utills/userInfoValidators"
import { provinceAndCityDataPlus } from 'element-china-area-data'
import { getAddressCode, getAddressText, data, elmessage } from "@/hook/hook"
import { salaryMins, salaryMaxs } from "@/utills/data"
// 全国各城市
const options = provinceAndCityDataPlus
// @ts-ignore
const { proxy } = getCurrentInstance() // 1.获取proxy实例

const store = useStore()
const userJobIdenForm = ref<FormInstance>()
const formLabelWidth = '80px'
onMounted(() => {
  getJobIndustry().then((res: any) => {
    store.state.authState.job_industry = reactive(res.data.job_industry)
  })
  userJobIdens.title = store.state.userState.userJobIdens.title
  userJobIdens.salaryMax = store.state.userState.userJobIdens.salaryMax
  userJobIdens.salaryMin = store.state.userState.userJobIdens.salaryMin

  userJobIdens.city = getAddressCode(store.state.userState.userJobIdens.city)


  userJobIdens.jobNature = store.state.userState.userJobIdens.jobNature
  userJobIdens.industry = store.state.userState.userJobIdens.industry
})

// 提交按钮
const saveInfo = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      // console.log(userJobIdens.city);
      userJobIdens.city = getAddressText(userJobIdens.city)
      // console.log(userJobIdens.city);
      store.commit("upUserJobIden", userJobIdens)

      store.commit("editJobIden")
      // 将信息提交给后端
      const updata = { ...data(), ...userJobIdens, ...{ upPart: "jobIden" } }
      

      proxy.$api.userApi.upUserInfo(updata).then((res: any) => {
        if (res.data.code == "200") {
          elmessage(res.data.message, res.data.type)
        }
        else {
          console.log(res.data.massege);

        }

      })

    } else {
      console.log('error submit!', fields)
    }
  })
}
// 取消按钮
const cancelEdit = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
  store.commit("editJobIden")
}


</script>
<style scoped>
.demo-ruleForm {
  height: 400px;
}

.demo-ruleForm:hover {
  transition-duration: 0.3s;
  transition-property: box-shadow;
  box-shadow: 0 0 3px #97999b;
  cursor: pointer;
}
</style>